<template>
  <div class="hello">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img src="../assets/images/首页/index_01.png"></van-swipe-item>
      <van-swipe-item><img src="../assets/images/首页/index_02.png"></van-swipe-item>
      <van-swipe-item><img src="../assets/images/首页/index_03.png"></van-swipe-item>
      <van-swipe-item><img src="../assets/images/首页/index_04.png"></van-swipe-item>
      <van-swipe-item><img src="../assets/images/首页/index_05.png"></van-swipe-item>
    </van-swipe>
    <div class="BBox">
      <div class="showCard">
        <div class="showWord">
        <p class="wordTitle" >时尚精选</p>
        <p class="english">Style Collocation</p>
        <img src="../assets/images/首页/icon_01.png" alt="">
        </div>
        <img src="../assets/images/首页/index_01.png">
      </div> 
      <div class="showCard">
        <div class="showWord">
        <p class="wordTitle">时尚精选</p>
        <p class="english">Style Collocation</p>
        <img src="../assets/images/首页/icon_01.png" alt="">
        </div>
        <img src="../assets/images/首页/index_02.png">
      </div>
      <div class="showCard">
        <div class="showWord">
        <p class="wordTitle">时尚精选</p>
        <p class="english">Style Collocation</p>
        <img src="../assets/images/首页/icon_01.png" alt="">
        </div>
        <img src="../assets/images/首页/index_03.png">
      </div>
      <div class="showCard">
        <div class="showWord">
        <p class="wordTitle">时尚精选</p>
        <p class="english">Style Collocation</p>
        <img src="../assets/images/首页/icon_01.png" alt="">
        </div>
        <img src="../assets/images/首页/index_04.png">
      </div>
      <div class="flexd" @click="showPopup">
        <img src="../assets/images/首页/button.png" alt="">
      </div>
      <van-popup v-model="show" position="left"  :style="{ height: '100%' ,width:'80%', }" >
        <div class="oneselfs">
         <div class="photo">
           <img src="../assets/images/个人中心/pic.png" alt="">
           <span>成伟龙</span>
         </div>
         <van-divider
            :style="{ color: '#999999', borderColor: '#999999', margin:0 }"
            dashed
          >
            <img src="../assets/images/个人中心/scissor.png" alt="" class="scissor">
          </van-divider>

          <ul class="sidebar">
            <li><van-icon name="wap-home-o" /> <span>首页</span> </li>
            <li><van-icon name="user-circle-o" /> <span>我的信息</span>  </li>
            <li><van-icon name="description" /> <span>我的订单</span> </li>
            <li><van-icon name="shopping-cart-o" /> <span>我的购物车</span> </li>
            <li><van-icon name="user-o" /> <span>我的尺寸</span> </li>
            <li><van-icon name="cash-on-deliver" /> <span>我的钱包</span> </li>
            <li><van-icon name="star-o" /> <span>我的收藏</span> </li>
            <li><van-icon name="location-o" /> <span>我的地址</span> </li>

            <li class="returns"><van-icon name="replay" /><span>返回</span></li>
          </ul>
          

        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      show: false,
      loading: true,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
      this.loading = false;
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

.sidebar{
 margin-top: 35px;
  line-height: 100px;
  font-size: 30px;
  padding-left: 46px;
  box-sizing: border-box;
  span{
    display: inline-block;
    margin-left: 24px;
  }
  .returns{
  margin-top: 48px;
}
}
.scissor{
  width: 30px;
}
.oneselfs{
  width: 100%;
  height: 100%;
  padding-top: 90px;
  background:url("../assets/images/个人中心/background.png");
  background-size: 100% 100%;
  color:#fff;
  .photo{
    width: 100%;
    height: 180px;
    line-height: 180px;
    span{
      font-size: 20px;
      color: #fff;
    }
    img{
      border-radius: 50%;
      width: 100px;
      height: 100px;
      margin-left: 36px;
      margin-left: 30px;
    }
  }
}
.BBox{
  width: 100%;
  height: 90%;
}
.showCard{
  width: 100%;
  height: 260px;
  margin-top: 10px;
  position: relative;
  .showWord{
    width: 130px;
    color: #fff;
    position: absolute;
    top: 116px;
    left: 586px;
    z-index: 1;
    overflow: hidden;
    .wordTitle{
      font-size: 28px;
      margin-bottom: 8px;
      line-height: 1;
    }
    .english{
      font-size: 16px;
      line-height: 1;
      white-space: nowrap;
    }
     img{
       width: 28px;
       height: 26px;
       float: right;
       margin-top: 28px;
    }
  }
}
.flexd{
  width: 100px;
  height: 100px;
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 999;
  img{
    width:100%;
    border-radius: 50%;
  }
}
.showCard img{
  width: 100%;
  height: 100%;
  // position: relative;
  // z-index: -1;
}
.my-swipe .van-swipe-item {
    height: 340px;
    color: #fff;
    font-size: 20px;
    line-height: 340px;
    text-align: center;
    background-color: #39a9ed;
    margin-top: 90px;
  }
</style>
